<template>
  <main-frame :location="location">
    <template slot="mainFrame">
      <div class="main-content">
        <el-card class="box-card">
          <div slot="header" class="clearfix title">
            <span>小程序访问量</span>
          </div>
          <div class="text item">
            <div class="view">
              <div class="msg">日访问量</div>
              <div class="num">{{ pageView.dayCount }}</div>
            </div>

            <div class="view">
              <div class="msg">周访问量</div>
              <div class="num">{{ pageView.weekCount }}</div>
            </div>
            <div class="view">
              <div class="msg">月访问量</div>
              <div class="num">{{ pageView.monthCount }}</div>
            </div>

            <div class="view">
              <div class="msg">总访问量</div>
              <div class="num">{{ pageView.allCount }}</div>
            </div>
          </div>
          <div class="pie newuser">
            <div class="newUserClass">
              <el-card shadow="never" class="box-card" body-style="padding:0 10px">
                <div slot="header" class="clearfix">
                  <span>新增用户</span>
                  <span>（最新15个）</span>
                </div>
                <div style="height: 300px;overflow-y: scroll">
                  <div v-for="user in newUsers"
                       style="padding-right: 5px;border-bottom: 1px solid #ebebeb;margin-bottom:10px;display: flex;justify-content: space-between;align-items: center;">
                    <div>
                      <el-image fit="cover" style="width:40px;height: 40px;margin-right:20px" :src="user.avatar"/>
                    </div>
                    <div
                      style="display: flex;font-size:15px;flex-direction: column">
                      <div>昵称：{{ user.nickName }}</div>
                      <div>学校：{{ user.schoolName == null ? '-' : user.schoolName }}</div>
                    </div>
                    <div>
                      {{ user.createTime.substring(0, 16) }}
                    </div>
                  </div>
                </div>
              </el-card>
            </div>
            <div style="width: 800px;height: 400px;" id="pieVisity"></div>
          </div>
        </el-card>
      </div>
      <div class="main-content">
        <el-card class="box-card">
          <div slot="header" class="clearfix title">
            <span>用户量统计</span>
          </div>
          <div class="text item">
            <div class="view">
              <div class="msg">日增用户</div>
              <div class="num">{{ userCount.dayCount }}</div>
            </div>

            <div class="view">
              <div class="msg">周增用户</div>
              <div class="num">{{ userCount.weekCount }}</div>
            </div>
            <div class="view">
              <div class="msg">月增用户</div>
              <div class="num">{{ userCount.monthCount }}</div>
            </div>

            <div class="view">
              <div class="msg">所有用户</div>
              <div class="num">{{ userCount.allCount }}</div>
            </div>
          </div>
          <div class="pie">
            <div style="width:800px;height: 400px" id="pieUser"></div>
          </div>
        </el-card>
      </div>
      <div class="main-content">
        <el-card class="box-card">
          <div slot="header" class="clearfix title">
            <span>闲置商品统计</span>
          </div>
          <div class="text item">
            <div class="view">
              <div class="msg">日增</div>
              <div class="num">{{ productCount.dayCount }}</div>
            </div>

            <div class="view">
              <div class="msg">周增</div>
              <div class="num">{{ productCount.weekCount }}</div>
            </div>
            <div class="view">
              <div class="msg">月增</div>
              <div class="num">{{ productCount.monthCount }}</div>
            </div>

            <div class="view">
              <div class="msg">所有</div>
              <div class="num">{{ productCount.allCount }}</div>
            </div>
          </div>
          <div class="pie">
            <div style="width: 600px;height: 400px;" id="pieProduct"></div>
          </div>
        </el-card>
      </div>

      <div class="main-content">
        <el-card class="box-card">
          <div slot="header" class="clearfix title">
            <span>跑腿任务统计</span>
          </div>
          <div class="text item">
            <div class="view">
              <div class="msg">日增</div>
              <div class="num">{{ taskCount.dayCount }}</div>
            </div>

            <div class="view">
              <div class="msg">周增</div>
              <div class="num">{{ taskCount.weekCount }}</div>
            </div>
            <div class="view">
              <div class="msg">月增</div>
              <div class="num">{{ taskCount.monthCount }}</div>
            </div>

            <div class="view">
              <div class="msg">所有</div>
              <div class="num">{{ taskCount.allCount }}</div>
            </div>
          </div>
          <div class="pie">
            <div style="width: 600px;height: 400px;" id="pieTask"></div>
          </div>
        </el-card>

        <el-card class="box-card">
          <div slot="header" class="clearfix title">
            <span>包裹任务统计</span>
          </div>
          <div class="text item">
            <div class="view">
              <div class="msg">日增</div>
              <div class="num">{{ packagesCount.dayCount }}</div>
            </div>

            <div class="view">
              <div class="msg">周增</div>
              <div class="num">{{ packagesCount.weekCount }}</div>
            </div>
            <div class="view">
              <div class="msg">月增</div>
              <div class="num">{{ packagesCount.monthCount }}</div>
            </div>

            <div class="view">
              <div class="msg">所有</div>
              <div class="num">{{ packagesCount.allCount }}</div>
            </div>
          </div>
          <div class="pie">
            <div style="width: 600px;height: 400px;" id="piePackages"></div>
          </div>
        </el-card>
      </div>
    </template>
  </main-frame>
</template>

<script>
import * as echarts from "echarts"

export default {
  data() {
    return {
      newUsers: [],
      location: "首页",
      userCount: {},
      taskCount: {},
      packagesCount: {}
      , productCount: {},
      pageView: {},

      pieData: {
        title: {
          text: '用户学校来源统计（top15）',
          subtext: '',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
        },
        series: [
          {
            top: "0px",
            left: 80,
            name: '用户来源',
            type: 'pie',
            radius: '50%',
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },
      width: 1000,

      pieUser: {},
      pieTask: {},
      pieProduct: {},
      piePackages: {},

      URL: {
        pageViewCount: "/statistical/activity",
        userCount: "/statistical/user",
        taskCount: "/statistical/task",
        packagesCount: "/statistical/packages",
        productCount: "/statistical/product",
        userPie: "/statistical/pie/user",
        taskPie: "/statistical/pie/task",
        productPie: "/statistical/pie/product",
        packagesPie: "/statistical/pie/packages",
        newUser: "/customer/newUsers",
      },
      pieOptions: [
        {
          id: "pieUser",
          url: "/statistical/pie/user",
          name: "用户来源",
          title: "用户学校来源统计",
        },
        {
          id: "pieTask",
          url: "/statistical/pie/task",
          name: "跑腿任务统计",
          title: "跑腿任务学校来源统计",
        },
        {
          id: "piePackages",
          url: "/statistical/pie/packages",
          name: "包裹任务统计",
          title: "包裹任务学校来源统计",
        }, {
          id: "pieProduct",
          url: "/statistical/pie/product",
          name: "二手闲置任务统计",
          title: "二手闲置任务学校来源统计",
        },
      ]
    }
  },
  created() {
    this.pageViewCountList()
    this.getNewUsers()
    this.userCountList()
    this.taskCountList()
    this.packagesCountList()
    this.productCountList()
  },
  mounted() {
    let that = this;
    this.pieOptions.forEach(e => {
      that.pieInitData(e.url, e.title, e.name, e.id)
    })
  },
  methods: {
    getNewUsers() {
      this.$get(this.URL.newUser + "?pageSize=15", {}).then(res => {
        if (res.R) {
          this.newUsers = res.data.rows
        }
      })
    },
    pieInitData(url, title, name, elementId) {
      this.$get(url, {}).then(res => {
        if (res.R) {
          let pieData = JSON.parse(JSON.stringify(this.pieData));
          pieData.title.text = title;
          pieData.series[0].name = name;
          pieData.series[0].data = res.data;

          if (elementId != 'pieUser') {
            pieData.legend = {
              orient: 'vertical',
              left: 'left',
            }
            pieData.series[0].top = '0px'
          }

          var myChart = echarts.init(document.getElementById(elementId));
          myChart.setOption(pieData);
        }
      })
    },
    pieUserData() {
      this.$get(this.URL.userCount, {}).then(res => {
        if (res.R) {
          this.userCount = res.data
        }
      })
    },
    userCountList() {
      this.$get(this.URL.userCount, {}).then(res => {
        if (res.R) {
          this.userCount = res.data
        }
      })
    },
    taskCountList() {
      this.$get(this.URL.taskCount, {}).then(res => {
        if (res.R) {
          this.taskCount = res.data
        }
      })
    },
    packagesCountList() {
      this.$get(this.URL.packagesCount, {}).then(res => {
        if (res.R) {
          this.packagesCount = res.data
        }
      })
    },
    productCountList() {
      this.$get(this.URL.productCount, {}).then(res => {
        if (res.R) {
          this.productCount = res.data
        }
      })
    }, pageViewCountList() {
      let options = {
        xAxis: {
          type: 'category',
          data: [],
          name: '日期',
        },
        title: {
          text: '折线图',
          subtext: '真实数据',
          x: 'center'
        },
        yAxis: {
          type: 'value',
          name: '访问量',
        },
        legend: {
          data: ['日访问量'],
          orient: 'horizontal',
          x: 'right',
          y: 'top'
        },
        series: [{
          name: '日访问量',
          data: [],
          type: 'line',
          smooth: true
        }]
      };
      this.$get(this.URL.pageViewCount, {}).then(res => {
        if (res.R) {
          this.pageView = res.data;
          options.xAxis.data = res.data.date;
          options.series[0].data = res.data.dateCount;
          var myChart = echarts.init(document.getElementById("pieVisity"));
          myChart.setOption(options);
        }
      })
    }
  }
};
</script>

<style scoped>
.main-content {
  display: flex;
  /*justify-content: center;*/
  /*align-items: center;*/
}

.pie {
  display: flex;
  justify-content: center;
  margin-top: 30px
}

.newuser {
  justify-content: space-between !important;
}

.box-card {
  width: 100%;
  margin: 10px;
}

.box-card .item {
  display: flex;
  justify-content: space-between;
}

.box-card .item .view {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.box-card .item .view .num {
  font-size: 30px;
}

.pie {
  padding-left: 20px;
}

.title {
  font-size: 25px;
  text-align: center;
  border-left: 5px solid red;
}

.title span {
}
</style>
